<template>
  <div class="foot_box">
    <div class="play_list">
      <div class="i_box">
        <div>
          <i class="el-icon-s-unfold" @click="handleMusicListState()"></i>
        </div>
      </div>
      <div :class="musicListState ? 'music_list' : 'music_list2'">
        <div class="fixed_top">
          <h3>当前播放</h3>
          <div class="tip_box">
            <div class="tip1">总共35首</div>

            <div class="tip2"></div>
          </div>
        </div>
        <div class="fixed_top1"></div>
        <ul>
          <li
            v-for="(val, index) in $store.state.musiclist.musicList"
            :key="index"
            @click="list_play(val)"
          >
            <table class="list">
              <tr :class="(index+1)%2 == 0 ? 't1' : ''">
                <td class="song_name">
                  <p>{{ val.name }}</p>
                  <span v-if="val.sq == null ? false : true" class="sq">SQ</span>
                </td>
                <td class="singer"><p>{{val.ar[0].name }}</p></td>
                <td class="time"><p>{{formarSongsTime(val.dt)}}</p></td>
              </tr>
              
            </table>
          </li>
        </ul>
      </div>
    </div>

    <div class="foot">
      <div class="lyrs" @click="handlelyrs">
        <img :src="$store.state.play_img" alt="" />
        <div class="tip" v-for="(val, index) in musicdata" :key="index">
          <h3>{{ val.name }}</h3>
          <p>{{ val.ar[0].name }}</p>
        </div>
      </div>
      <audio :src="musicurl" muted autoplay ref="ad"></audio>

      <div class="play_box">
        <div class="but_box">
          <i
            v-for="(val, index) in playWayIcon"
            :id="'playWay' + (index + 1)"
            :class="val"
            v-show="index == playWay"
            @click="playWay1"
          ></i>
          <i class="el-icon-caret-left last i1" @click="last"></i>
          <i
            class="el-icon-video-pause play"
            @click="handleplay()"
            v-show="this.$store.state.playstate"
          ></i>
          <i
            class="el-icon-video-play play"
            @click="handleplay()"
            v-show="!this.$store.state.playstate"
          ></i>
          <i class="el-icon-caret-right next i1" @click="next"></i>
          <i class="tip">词</i>
        </div>
        <div class="progress_box">
          <span class="star time">{{ starTime }}</span>
          <div class="progress" @click="progress">
            <span ref="progressbar"></span
            ><span class="dian" @mousedown="handledown"></span>
          </div>
          <span class="end time">{{ endTime }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import lyrs from './lyrs.vue'
let getCurrentTime
export default {
  components: {
    lyrs
  },
  data () {
    return {
      musicurl: '',
      starTime: '00:00',
      endTime: '00:00',
      musicId: 0,
      musicdata: [],
      progressbarWidth: 0,
      musicListState: false,
      playWay: this.$store.state.musiclist.play_way, // 播放方式切换,随机播放,单曲循环,列表顺序播放
      playWayIcon: [
        'el-icon-refresh-right play_way i1',
        'el-icon-refresh',
        'el-icon-s-unfold'
      ]
    }
  },
  mounted () {
    console.log(this.$store.state.musiclist.musicList,123)
     const progressbar = this.$refs.progressbar
     console.log(progressbar.getBoundingClientRect().left,1234567)
    // 播放音乐,获取音乐相关信息
    this.$bus.$on('play', (data, songs) => {
      this.musicurl = data.data[0].url
      this.musicId = data.data[0].id

      this.musicdata = songs.songs
      this.$store.state.play_img = songs.songs[0].al.picUrl
      this.$store.state.playstate = true
      setTimeout(() => {
        this.play()
      }, 500)
    })
  },
  watch: {
    // 检测播放切换方式改变
    playWay () {
      this.$store.commit('musiclist/changePlayWay', this.playWay)
    }
  },
  methods: {
    // 播放音频
    play () {
      clearInterval(getCurrentTime)
      const ad = this.$refs.ad
      ad.play()
      getCurrentTime = setInterval(this.initTime, 800)
    },
    handleplay () {
      clearInterval(getCurrentTime)
      const ad = this.$refs.ad
      if (this.$store.state.playstate) {
        ad.pause()
        clearInterval(getCurrentTime)
      } else {
        ad.play()
        getCurrentTime = setInterval(this.initTime, 1000)
      }
      console.log(ad.play)
      this.$store.state.playstate = !this.$store.state.playstate
    },
    initTime () {
      // 获取音频及进度条dom节点
      const ad = this.$refs.ad
      const progressbar = this.$refs.progressbar

      // 格式化音频时间
      this.endTime = this.utils.formarSongsTime(ad.duration * 1000)
      this.starTime = this.utils.formarSongsTime(ad.currentTime * 1000)
      this.$store.state.playTime = ad.currentTime
      // 播放状态为true
      this.playstate = true
      // 计算播放时间百分比
      const progress = ad.currentTime / ad.duration
      // 根据播放百分比计算进度条宽度
      progressbar.style.width = progress * 390 + 'px'
      // 判断是否播放结束
      if (progress == 1) {
        console.log('时间到了')
        clearInterval(getCurrentTime)
        this.$store.state.playstate = false
        if (this.playWay == 0) {
          const index = Math.floor(
            Math.random() * (this.$store.state.musiclist.musicList.length - 1)
          )
          const list = this.$store.state.musiclist.musicList
          this.utils.playSong(list[index].id).then((res) => {
            this.$bus.$emit('play', res[0], res[1])
          })
        } else if (this.playWay == 1) {
          setTimeout(() => {
            this.play()
            this.$store.state.playstate = !this.$store.state.playstate
          }, 500)
        } else if (this.playWay == 2) {
          const list = this.$store.state.musiclist.musicList
          // 遍历查找
          for (const key in list) {
            // console.log(list[key],11111111111)
            if (list[key].id == this.musicId) {
              //console.log(key, 'zzzzzzzzzzzzzzzzzz')
              const id1 = parseInt(key) + 1
              this.musicId = id1
              this.utils.playSong(list[id1].id).then((res) => {
                this.$bus.$emit('play', res[0], res[1])
              })
            }
          }
        }
      }
    },

    // 初始化发送歌曲数据到歌词面板
    handlelyrs () {
      Promise.all([
        // 歌曲详情
        this.getapi.songDetail(this.musicId),
        // 获取歌词
        this.getapi.getSongLyr(this.musicId)
      ]).then((res) => {
        this.$bus.$emit('lyrs', res[0].songs[0], res[1].lrc.lyric)
        // console.log(res[0].songs[0], res[1].lrc.lyric, 33333333333);
      })
    },
    progress (e) {
      clearInterval(getCurrentTime)
      const ad = this.$refs.ad
      ad.pause()
      // 点击进度条修改音频播放时间及进度条宽度
      const progressbar = this.$refs.progressbar
      let left = progressbar.getBoundingClientRect().left
      const playtime = ad.duration
      // progressbar.style.width = e.clientX - 430 + "px";
      console.log(e,e.clientX,'xjxjjxfj')
      ad.currentTime = ((e.clientX - left-8) / 390) * playtime

      setTimeout(() => {
        getCurrentTime = setInterval(this.initTime, 800)
         ad.play()
      },200)
    },

    handledown () {
      document.addEventListener('mousemove', this.handleMouseMove)
      document.addEventListener('mouseup', this.handleUp)
    },
    handleUp () {
      document.removeEventListener('mousemove', this.handleMouseMove)
      const ad = this.$refs.ad
      const playtime = ad.duration
      // progressbar.style.width = e.clientX - 430 + "px";
      ad.currentTime = (this.progressbarWidth / 390) * playtime
    },
    handleMouseMove (e) {
      const progressbar = this.$refs.progressbar
      const x = e.clientX - 430
      if (x < 0) {
        progressbar.style.width = 0 + 'px'
        this.progressbarWidth = 0
        return
      }
      if (x > 390) {
        progressbar.style.width = 390 + 'px'
        this.progressbarWidth = 390
      } else {
        progressbar.style.width = x + 'px'
        this.progressbarWidth = x
      }
      // console.log(x);
    },

    handleMusicListState () {
      this.musicListState = !this.musicListState
      console.log(this.$store.state.musiclist.musicList, 'zxc')
    },
    list_play (val) {
      console.log(val.id)
      this.utils.playSong(val.id).then((res) => {
        this.$bus.$emit('play', res[0], res[1])
      })
    },
    playWay1 () {
      if (this.playWay < this.playWayIcon.length - 1) {
        this.playWay += 1
      } else {
        this.playWay = 0
      }
      this.$store.commit('musiclist/changePlayWay', this.playWay)
    },
    // 上一首
    last () {
      // console.log(this.musicdata,456)
      const id = this.findingMusic(this.musicdata[0].id, false)
      // console.log(index,"last")

      if (id != -1 && id != undefined) {
        this.utils.playSong(id).then((res) => {
          this.$bus.$emit('play', res[0], res[1])
        })
      }
    },
    // 下一首
    next () {
      // console.log(this.musicdata,456)
      const id = this.findingMusic(this.musicdata[0].id, true)
      /// console.log(index,"next")

      if (id != -1 && id != undefined) {
        this.utils.playSong(id).then((res) => {
          this.$bus.$emit('play', res[0], res[1])
        })
      }
    },
    // 查找列表中的歌曲
    findingMusic (id, status) {
      // 获取播放列表数据
      const list = this.$store.state.musiclist.musicList
      // 遍历查找
      for (const key in list) {
        // console.log(list[key],11111111111)
        if (list[key].id == id) {
          console.log(list[key])
          if (status) {
            // 返回下一首歌的id
            return list[parseInt(key) + 1].id
          } else {
            if (key == 0) {
              return -1
            }
            return list[parseInt(key) - 1].id
          }
        }
      }
    }
  },
  computed: {
    formarSongsTime () {
      return function (res) {
        return this.utils.formarSongsTime(res)
      }
    }
  }
}
</script>

<style scoped>
.foot_box {
  width: 100%;
  height: 70px;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #e1e1e1;
  background-color: white;
  z-index: 999;
}
.foot {
  width: 1250px;
  height: 70px;
  background-color: rgb(255, 255, 255);
  margin: 0 auto;
  position: relative;
}
.lyrs {
  width: auto;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
}
.lyrs img {
  width: 70px;
  height: 80%;
  border-radius: 10px;
}
.lyrs .tip {
  margin-left: 5px;
}
.lyrs .tip p {
  margin-top: 5px;
}
audio {
  width: 600px;
  height: 50px;
  background-color: antiquewhite;
}
.play_box {
  width: 50%;
  height: 100%;
  margin: 0 auto;
}
.but_box {
  width: 100%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.but_box i {
  margin-left: 20px;
  color: #333333;
}
.progress_box {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
}
.progress {
  width: 398px;
  height: 3px;
  background-color: #cdcdcd;
  border-radius: 3px;
  position: relative;
  margin: 0 10px;
}
.progress span {
  width: 1px;
  height: 100%;
  background-color: #ff4e4e;
  display: block;
  float: left;
  border-radius: 3px;
}
.progress .dian {
  width: 8px;
  height: 8px;
  float: left;
  background-color: #ff4e4e;
  margin-top: -2.5px;
  border-radius: 50%;
}
.but_box .i1 {
  font-size: 1.5rem;
}
.play_way {
  margin-left: 0;
}
.but_box .play {
  font-size: 2.35rem;
}
.play_box .tip {
  font-size: 1rem;
}
.progress_box .time {
  font-size: 0.7rem;
  margin-top: -5px;
  color: #9f9f9f;
}
</style>

<style scoped>
.play_list {
  width: 350px;
  height: 100%;
  position: absolute;

  z-index: 999;
  right: 0;
}
.play_list .i_box {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: white;
}
.i_box > div {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.i_box i {
  font-size: 1.75rem;
}
.music_list {
  width: 100%;
  height: 470px;
  background-color: #ffffff;
  position: absolute;
  top: -471px;
  transition: all 0.3s;
  z-index: -99;
  box-shadow: -1px -1px 2px rgb(221, 217, 217);
}
.music_list2 {
  width: 100%;
  height: 0;
  background-color: #ffffff;
  position: absolute;
  top: 0;
  z-index: -1;
  transition: all 0.1s;
  z-index: -99;
  box-shadow: 1px 1px 0px #ffffff;
  margin-left: 10px;
}
.music_list ul {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.music_list ul::-webkit-scrollbar {
  width: 5px;
}
.music_list ul::-webkit-scrollbar-thumb {
  background-color: #e1e1e1;
  border-radius: 5px;
}
.music_list > ul {
  box-sizing: border-box;
  padding-left: 15px;
}
.music_list h3 {
  width: 100%;
  line-height: 50px;
  box-sizing: border-box;
}
.music_list > ul li {
  width: 100%;
  line-height: 40px;
  cursor: pointer;
}
.music_list .fixed_top {
  width: 350px;
  height: 100px;
  position: fixed;
  background-color: white;
  box-sizing: border-box;
  padding-left: 15px;
}
.music_list .fixed_top1 {
  width: 350px;
  height: 100px;
  background-color: white;
}
.music_list .tip_box {
  width: 350px;
  height: 50px;
}
.tip_box .tip1 {
  width: 100px;
  height: 100%;
  float: left;
}
.tip_box .tip2 {
  width: 100px;
  height: 100%;
  float: right;
}
#playWay1 {
  width: 25px;
  font-size: 1.5rem;
}
#playWay2 {
  width: 25px;
  font-size: 1.5rem;
}
#playWay3 {
  width: 25px;
  font-size: 1.5rem;
}
</style>


<style scoped>
.fixed_top1 .list{
  width: 350px;
}
.list tr{
  width: 100%;
  background-color: #f9f9f9;
}
.list .t1{
  background-color: white;
}
.list tr:hover{
  background-color: #f5f5f5;
}
.list td{
  color: #1e1e1e;
  font-size: 0.9rem;
}
.list .song_name{
  width: 175px;
  height: 100%;
  box-sizing: border-box;
  padding-left: 15px;
}
.list .singer{
  width: 87px;
  height: 100%;
  box-sizing: border-box;
  padding-left: 15px;
}
.list .time{
  width: 87px;
  height: 100%;
  text-align: center;
}
.list td p{
  width: 80px;
  line-height: 40px;
  float: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.list .time p{
  width: 87px;
}
.sq{
  width: 25px;
  line-height: 15px;
  text-align: center;
  display: inline-block;
  border: 1px solid #ec4141;
  border-radius: 3px;
  color: #ec4141;
  margin-left: 10px;
  font-size: 0.9rem;
}
.list tr:hover p{
  color: rgb(0, 0, 0);
  font-size: 1rem;
}
</style>
